<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" closable @tab-remove="targetName => closeTab(targetName)">
    <el-tab-pane :label="tab.label" :key="tab.name" :name="tab.name" v-for="tab in tabs" >
      <div style="padding-left: 25px; color: red">{{tab.msg}}</div>
      <ProblemUserItem
        :sys_normal_disable="dict.type.sys_normal_disable"
        :sys_user_sex="dict.type.sys_user_sex"
        :sys_employ_type="dict.type.sys_employ_type"
        :sys_user_category="dict.type.sys_user_category"
        :sys_data_auth="dict.type.sys_data_auth"
        :marital_status="dict.type.marital_status"
        :nation="dict.type.nation"
        :politics_outlook="dict.type.politics_outlook"
        :format="dict.type.format"
        :academic="dict.type.academic"
        :initPassword="initPassword"
        :rankingOptions="rankingOptions"
        :userTipOptions="userTipOptions"
        :deptOptions="deptOptions"
        :roleOptions="roleOptions"
        :contract_type="dict.type.contract_type"
        :reward_level="dict.type.reward_level"
        :userData="tab.data"
        @close="() => closeTab(tab.name)"
      />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { getDicts } from "@/api/system/dict/data";
import { listRole } from "@/api/system/role";
import {listTip} from "@/api/system/tip/tipApi";
import ProblemUserItem from "@/views/system/user/problemUserItem";
import {treeselect} from "@/api/system/dept";

export default {
  props: ['problemUsers', 'problemMsg'],
  components: { ProblemUserItem },
  dicts: [
    "sys_normal_disable",
    "sys_user_sex",
    "sys_employ_type",
    "sys_user_category",
    "sys_data_auth",
    "marital_status",
    "nation",
    "politics_outlook",
    "format",
    "academic",
    "contract_type",
    "reward_level"
  ],
  data() {
    return {
      activeName: 'tab' + this.problemUsers[0].index,
      initPassword: undefined,

      rankingOptions: [],
      userTipOptions: [],
      deptOptions: [],
      roleOptions: [],
      tabs: [],
    };
  },
  created() {
    this.tabs = this.problemUsers.map(item => {
      return {
        label: item.userName ? item.userName : "tab" + parseInt(Math.random() * 10000),
        name: 'tab' + item.index,
        data: item,
      };
    });
    getDicts("ranking").then(res => {
      if (res.code == 200) {
        this.rankingOptions = res.data
      }
    });
    listRole({
      pageNum: 1,
      pageSize: 1000,
      filterAdmin: true,
    }).then((response) => {
      this.roleOptions = response.rows;
    });
    this.getConfigKey("sys.user.initPassword").then(response => {
      this.initPassword = response.msg;
    });
    this.getSysUserTip();
    this.getTreeselect();
  },
  mounted() {
    this.problemMsg.split(/<\/?[^>]+>/).forEach((item, index) => {
      try {
        if (index >= 2 && this.tabs[index - 2]) {
          this.tabs[index - 2].msg = item;
        }
      }catch (e) {
        console.info(e)
      }
    })
  },
  methods: {
    closeTab(tabName) {
      this.tabs = this.tabs.filter(tab => tab.name !== tabName);
      if (this.tabs.length > 0) {
        this.activeName = this.tabs[0].name;
      } else {
        this.$tab.clearKeepAlivePage("User");
        // 刷新列表页面
        this.$tab.refreshPage({path: "/manager/user"});
        this.$emit("close");
      }
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
    },
    getSysUserTip() {
      listTip().then((resp) => {
        this.userTipOptions = resp.rows;
      });
    },
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
      });
    },
  }
};
</script>

<style scoped lang="scss">

</style>
